<template>
  <div id="app">
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

<style lang="less">
#app {
  font-family: "Microsoft YaHei";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
  font-size: 14px;
  .el-date-editor .el-range-separator {
    width: 10%;
  }
}

.OF {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Ma {
  margin: 0 auto;
}

.flex {
  display: flex;
  display: -webkit-flex; /*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
  display: -moz-flex; /*老版本语法：Firefox(buggy)*/
  display: -ms-flexbox; /*混合版本语法：IE 10*/
}

.flexR {
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.flexRr {
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.flexC {
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flexJ {
  justify-content: space-between;
}
.flexJp {
  justify-content: space-around;
}
.center {
  -moz-box-align: center;
  -webkit-box-align: center;
  // -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -moz-box-pack: center;
  -webkit-box-pack: center;
  // -ms-flex-pack: center;
}

.top {
  -moz-box-align: flex-start;
  -webkit-box-align: flex-start;
  // -ms-flex-align: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -moz-box-pack: flex-start;
  -webkit-box-pack: flex-start;
  // -ms-flex-pack: flex-start;
}

.Jb {
  background: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 100%);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #ffffff),
    color-stop(100%, #e6e6e6)
  );
  background: -webkit-linear-gradient(top, #ffffff 0%, #e6e6e6 100%);
  background: -o-linear-gradient(top, #ffffff 0%, #e6e6e6 100%);
  background: -ms-linear-gradient(top, #ffffff 0%, #e6e6e6 100%);
}
.C {
  text-align: center;
}

.el-table .cell {
  text-align: center;
}
.table-fixed {
  .el-table__fixed-right {
    height: 100% !important; //设置高优先，以覆盖内联样式
  }
}

.tables {
  margin: 0 10px;
  .el-table .cell {
    text-align: center;
  }
  .table-fixed {
    .el-table__fixed-right {
      height: 100% !important; //设置高优先，以覆盖内联样式
    }
  }
  .el-table {
    overflow: auto;
  }
  .el-table .el-table__body-wrapper,
  .el-table .el-table__header-wrapper,
  .el-table .el-table__footer-wrapper {
    overflow: visible;
  }
  .el-table::after {
    position: relative !important;
  }
  .table_operation {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .el-table__header {
    width: 100% !important;
  }
  .el-table__body {
    width: 100% !important;
  }
  /* .tableX为要显示滚动条的类名 */
  /* 显示横向滚动条 */
  .tableX .el-table--scrollable-x .el-table__body-wrapper {
    padding: 0 0 5px 0;
    margin: 0 0 5px 0;
    overflow-x: auto;
  }
  /* 滚动条的滑块样式 */
  .tableX .el-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ccc !important;
    border-radius: 30px !important;
  }
  /* 去除右侧固定定位阴影多出来的像素 */
  .tableX .el-table__fixed-right {
    height: calc(100% - 27px) !important;
  }
}

.el-form {
  input {
    border-radius: none;
  }
}
.el-input__inner {
  border-radius: none;
}

.table_list {
  margin: 0 15px;
}

.paging {
  height: 100px;
  -moz-box-align: center;
  -webkit-box-align: center;
  // -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -moz-box-pack: center;
  -webkit-box-pack: center;
  // -ms-flex-pack: center;
  justify-content: space-around;
}
// 修改所以表单 标题颜色
.el-form-item__label {
  font-weight: 400;
  color: #333333;
}
.el-table thead {
  color: #7a818c !important;
}
.el-table__body td {
  color: #666666 !important;
}
.cp {
  cursor: pointer;
}

// 修改表单统一样式
.search {
  padding: 0 15px;
  .el-form--inline {
    .el-form-item {
      margin-right: 20px;
      .el-form-item__label-wrap {
        margin-left: 0px !important;
      }
    }
  }
}
</style>
